import React, { useEffect, useState } from 'react';
import { Descriptions, Modal, Divider, Button } from 'antd'
import { isNull, showMsg, print } from '@/utils/utils';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getRentDetailByRentOrderId } from '@/services/order/api';
import './style.less';
// @ts-ignore
import QRCode from 'qrcode.react';
import RenderDone from '@/components/RenderDone';

const FeeDetailDialog: React.FC<any> = (props) => {
  const {
    rent_order_id,
    handleModalVisible,
    printNow,
    setPrintNow
  } = props;

  const [printing, setPrinting] = useState(true);// 是否弹出打印窗口

  const columns: ProColumns<STOCKGOODSAPI.GoodsItem>[] = [
    {
      title: '商品名称',
      dataIndex: 'goods_name',
      width: 200
    },
    {
      title: '登记时间',
      dataIndex: 'register_time',
      width: 100
    },
    {
      title: '租赁周期',
      dataIndex: 'lease_cycle',
      valueType: 'select',
      valueEnum: {
        H: '按小时',
        D: '按天'
      },
      width: 100
    },
    {
      title: '周期长度',
      dataIndex: 'cycle_num',
      width: 90,
      align: 'right'
    },
    {
      title: '单价',
      dataIndex: 'goods_price',
      width: 80,
      valueType: 'money',
      align: 'right'
    },
    {
      title: '数量',
      dataIndex: 'goods_num',
      width: 90,
      align: 'right'
    },
    {
      title: '价格',
      dataIndex: 'goods_total_price',
      width: 90,
      valueType: 'money',
      align: 'right'
    }
  ]

  // 租赁详情
  const [rentDetail, setRentDetail] = useState<any>({});
  // 结算详情
  const [settleDetail, setSettleDetail] = useState<any>({});

  // 物品列表
  const [goodsList, setGoodsList] = useState<any[]>([]);

  const [dataLoadingDone, setDataLoadingDone] = useState(false);
  const [printBtnLoading, setPrintBtnLoading] = useState(true);

  useEffect(() => {
    if (rent_order_id) {
      setPrintBtnLoading(true);
      getRentDetailByRentOrderId(rent_order_id).then(res => {
        setRentDetail(res);
        setSettleDetail(Object.assign({}, res, res.order_rent_sett));
        setGoodsList(res.detail_list);

        setDataLoadingDone(true);
      }).catch(error => {
        showMsg(error?.data?.errmsg);
      })
    }
  }, [rent_order_id])

  // 获取结算状态
  const getSettleStatus = () => {
    return settleDetail.sett_status === 'U' ? '未结算' : settleDetail.sett_status === 'P' ? '已结算' : '结算中'
  }

  const showQrCode = !isNull((settleDetail.order_rent_sett || {}).pay_qr_code_url || settleDetail.pay_qr_code_url);

  return <Modal
    width="90%"
    maskClosable={false}
    className="fee-deatial-dialog"
    onCancel={() => {
      handleModalVisible(false)
      setPrintNow(false)
    }}
    footer={[
      <Button key="close" onClick={() => {
        handleModalVisible(false);
        setPrintNow(false)
      }}>
        关闭
      </Button>,
      <Button key="pay" type="primary" loading={printBtnLoading} onClick={() => {
        setPrinting(true);
        print(document.querySelector('.fee-deatial-dialog .ant-modal-body'), {
          size: 'portrait'
        });
      }}>
        打印
      </Button>
    ]}
    visible>
    <div className="dialog">
      <h2 className="tc">缴费单</h2>
      <Divider />
      <div>1.患者信息</div>
      <Divider />
      <Descriptions className="bill-info-list" column={4}>
        <Descriptions.Item label="住院号/身份证号">
          {rentDetail.admission_num || rentDetail.identity_no}
        </Descriptions.Item>
        <Descriptions.Item label="患者姓名">
          {rentDetail.patient_name}
        </Descriptions.Item>
        <Descriptions.Item label="归属科室">
          {rentDetail.patient_dept_name}
        </Descriptions.Item>
      </Descriptions>

      <div style={{ marginBottom: 10 }}>2.物品信息</div>

      <Divider style={{ margin: '10px 0 0' }} />

      <ProTable<any>
        rowKey="goods_id"
        options={false}
        search={false}
        columns={columns}
        dataSource={goodsList}
        pagination={false}
        bordered />

      <div style={{ marginBottom: 10 }}>3.结算信息</div>
      <Divider style={{ margin: '10px 0' }} />
      <Descriptions column={showQrCode ? (printing ? 6 : 5) : 3}>
        <Descriptions.Item span={showQrCode ? (printing ? 5 : 4) : 3} className='noBottom'>
          <Descriptions column={showQrCode ? 2 : 3}>
            <Descriptions.Item label="订单编号">{rentDetail.rent_order_id}</Descriptions.Item>
            <Descriptions.Item label="创建时间">{rentDetail.create_date + ' ' + rentDetail.create_time}</Descriptions.Item>
            <Descriptions.Item label="物品数量">
              <span style={{ color: '#F5232D', fontWeight: 'bold' }}>{2}</span>（件）
            </Descriptions.Item>
            <Descriptions.Item label="结算价格">
              <span style={{ color: '#F5232D', fontWeight: 'bold' }}>{80}</span>（元）
            </Descriptions.Item>
            <Descriptions.Item label="订单状态">
              {getSettleStatus()}
            </Descriptions.Item>
          </Descriptions>
        </Descriptions.Item>

        {
          showQrCode &&
          <Descriptions.Item className='noBottom'>
            <Descriptions column={printing ? 1 : 2}>
              <Descriptions.Item label="扫码支付">
                <QRCode
                  value={(settleDetail.order_rent_sett || {}).pay_qr_code_url || settleDetail.pay_qr_code_url || ''}
                  size={80}
                  fgColor="#000"
                  renderAs="svg"
                />
              </Descriptions.Item>
            </Descriptions>
          </Descriptions.Item>
        }
      </Descriptions>
      <RenderDone onUpdate={() => {
        if (dataLoadingDone) {
          setPrintBtnLoading(false);
          if (printNow) {
            print(document.querySelector('.fee-deatial-dialog .ant-modal-body'), {
              size: 'portrait'
            });
          }
        }
      }}></RenderDone>
    </div>
  </Modal>
}
export default FeeDetailDialog;
